<template>
	<view class="container">
	<view class="pages">
		<view class="bac"></view>
			<!-- 详情 -->
		<view class="detail">
			<image src="/static/Maintenance/washcar.png" mode=""></image>
			<view class="intro">
				<view class="hang1">
					<view>大美汽车保养厂（解放路店）</view>
				</view>
				<view class="hang2">
					<view>⭐⭐⭐⭐</view>
					<view>4分</view>
					<view>销量：556</view>
				</view>

				<view class="hang3">
					<view>营业时间：周一至周五</view>
					<view>早上8:00----晚上22:00</view>
				</view>
				<view class="hang4">
					<view class="addr">位置：山阳区人民路与解放路交叉口</view>
					<image src="/static/Maintenance/plane.png" mode=""></image>
				</view>
			</view>
		</view>
			<!-- 服务项目 -->
		<view class="service">
			<view class="title">服务项目</view>
			<view class="items">
					<view class="item" v-for="(item, index) in serviceList" :key="index" @click="selectService(index)">
						<view class="item-content">
							<view class="radio-wrapper">
								<view class="radio" :class="{ 'radio-selected': item.selected }"></view>
							</view>
							<view class="item-info">
								<view class="item-header">
									<view class="item-name" :class="{ 'item-name-selected': item.selected }">
										{{ item.name }}
									</view>
									<view class="price-wrapper">
										<text class="current-price">¥{{ item.currentPrice }}</text>
										<text class="original-price">¥{{ item.originalPrice }}</text>
									</view>
								</view>
								<view class="item-description">
									{{ item.description }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--服务评价  -->
			<view class="evaluate">
				<view class="title">服务评价</view>
				<view class="user">
					<view class="userinfo">
						<view class="left">
							<image src="/static/Maintenance/user.png" mode=""></image>
						</view>
						<view class="right">
							<view class="hang1">
								<view>黄**</view>
								<view>2025-11-11</view>
							</view>
							<view class="hang2">
								⭐⭐⭐⭐
							</view>
							<view class="hang2">
								洗的非常干净，小伙子很用心，态度很好，长的也帅，推荐来这家店洗车！！！！
							</view>
						</view>
					</view>
					<view class="userinfo">
						<view class="left">
							<image src="/static/Maintenance/user.png" mode=""></image>
						</view>
						<view class="right">
							<view class="hang1">
								<view>黄**</view>
								<view>2025-11-11</view>
							</view>
							<view class="hang2">
								⭐⭐⭐⭐
							</view>
							<view class="hang2">
								洗的非常干净，小伙子很用心，态度很好，长的也帅，推荐来这家店洗车！！！！
				</view>
			</view>
		</view>

				</view>
				<view class="userinfo">
					<view class="left">
						<image src="/static/Maintenance/user.png" mode=""></image>
					</view>
					<view class="right">
						<view class="hang1">
							<view>黄**</view>
							<view>2025-11-11</view>
						</view>
						<view class="hang2">
							⭐⭐⭐⭐
						</view>
						<view class="hang2">
							洗的非常干净，小伙子很用心，态度很好，长的也帅，推荐来这家店洗车！！！！
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底层 -->
		<view class="bottom">
			<button class="buyCar">购物车（0）</button>
			<button class="confirm" @click="showOrderModal">确认已选服务</button>
		</view>
		
		<!-- 服务订单模态框 -->
		<view class="modal-mask" v-if="showModal" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<view class="modal-title">服务订单</view>
					<view class="modal-close" @click="closeModal">×</view>
				</view>
				<view class="modal-body">
					<view 
						class="order-item" 
						v-for="(item, index) in orderServices" 
						:key="index"
						@click="toggleOrderItem(index)"
					>
						<view class="order-radio-wrapper">
							<view class="order-radio" :class="{ 'order-radio-selected': item.selected }"></view>
						</view>
						<view class="order-item-name">{{ item.name }}</view>
						<view class="order-item-price">¥{{ item.currentPrice }}</view>
					</view>
				</view>
				<view class="modal-footer">
					<view class="total-btn">合计: ¥{{ totalPrice }}</view>
					<view class="confirm-btn" @click="confirmOrder">确认已选服务</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	const serviceList = ref([{
			name: '小保养套餐(合成机油+机滤)',
			currentPrice: '35.9',
			originalPrice: '60',
			description: '这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍',
			selected: false
		},
		{
			name: '小保养套餐2(合成机油+机滤)',
			currentPrice: '35.9',
			originalPrice: '60',
			description: '这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍',
			selected: true
		},
		{
			name: '小保养套餐3(合成机油)',
			currentPrice: '35.9',
			originalPrice: '60',
			description: '这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍',
			selected: true
		}
	])

	const showModal = ref(false)
	const orderServices = ref([])

	// 获取已选中的服务
	const selectedServices = computed(() => {
		return orderServices.value.filter(item => item.selected)
	})

	// 计算总价
	const totalPrice = computed(() => {
		return selectedServices.value.reduce((sum, item) => {
			return sum + parseFloat(item.currentPrice || 0)
		}, 0).toFixed(2)
	})

	const selectService = (index) => {
		// 单选逻辑：先取消所有选中，再选中当前项
		serviceList.value.forEach((item, i) => {
			item.selected = i === index
		})
	}

	// 显示订单模态框
	const showOrderModal = () => {
		// 将所有服务复制到订单列表，保持选中状态
		orderServices.value = serviceList.value.map(item => ({
			...item,
			selected: item.selected
		}))
		
		showModal.value = true
	}

	// 关闭模态框
	const closeModal = () => {
		showModal.value = false
	}

	// 切换订单项选中状态
	const toggleOrderItem = (index) => {
		orderServices.value[index].selected = !orderServices.value[index].selected
	}

	// 确认订单
	const confirmOrder = () => {
		if (selectedServices.value.length === 0) {
			uni.showToast({
				title: '请至少选择一个服务',
				icon: 'none'
			})
			return
		}
		
		uni.showToast({
			title: '订单确认成功',
			icon: 'success'
		})
		
		// 可以在这里添加提交订单的逻辑
		// ...
		
		closeModal()
	}
</script>

<style scoped>
	.container {
		position: relative;
		min-height: 100vh;
	}
	
	.bac {
		background-color: #2b85e4;
		height: 300rpx;
	}
/* 详情 */
	.detail {
		background-color: white;
		margin: -260rpx 22rpx;
		width: 94%;
		height: 750rpx;
		border-radius: 30rpx;

	}

	.detail image {
		border-radius: 30rpx;
		width: 650rpx;
		margin: 20rpx 30rpx;
		
	}

	.intro {
		padding: 0 40rpx;
	}

	.hang1 {
		font-weight: bold;
		font-size: 35rpx;
	}

	.hang2,
	.hang3 {
		display: flex;
		font-size: 22rpx;
		margin: 10rpx 0;
	}

	.hang2 view:nth-child(3),
	.hang3 view:nth-child(2) {
		margin-left: 30rpx;
	}

	.hang4 {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		margin-top: -20rpx;

	}

	.hang4 image {
		width: 30rpx;
		height: 30rpx;
	}
	
	
	
	
	
	
	
	
/* 服务 */
	.service {
		margin-top: 290rpx;
		margin-left: 20rpx;
		background-color: white;
		width: 94%;
		padding: 40rpx 30rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
	}

	.service .title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
		line-height: 1;
	}

	.items {
		display: flex;
		flex-direction: column;
	}

	.item {
		margin-bottom: 40rpx;
	}

	.item:last-child {
		margin-bottom: 0;
	}

	.item-content {
		display: flex;
		align-items: flex-start;
		width: 100%;
	}

	.radio-wrapper {
		margin-right: 24rpx;
		flex-shrink: 0;
		padding-top: 6rpx;
	}

	.radio {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #d9d9d9;
		background-color: #fff;
		position: relative;
		box-sizing: border-box;
		transition: all 0.2s;
	}

	.radio-selected {
		border-color: #2b85e4;
		background-color: #2b85e4;
	}

	.radio-selected::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background-color: #fff;
	}

	.item-info {
		flex: 1;
		min-width: 0;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 16rpx;
		width: 100%;
		gap: 20rpx;
	}

	.item-name {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		line-height: 1.5;
		min-width: 0;
	}

	.item-name-selected {
		color: #2b85e4;
	}

	.price-wrapper {
		display: flex;
		align-items: baseline;
		flex-shrink: 0;
		gap: 12rpx;
	}

	.current-price {
		font-size: 34rpx;
		font-weight: bold;
		color: #e74c3c;
		line-height: 1;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		line-height: 1;
	}

	.item-description {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		word-wrap: break-word;
		word-break: break-all;
		margin-top: 8rpx;
	}


/* 评价 */
	.evaluate {
		margin-top: 30rpx;
		margin-left: 20rpx;
		background-color: white;
		width: 94%;
		padding: 40rpx 30rpx;
		border-radius: 30rpx;
		box-sizing: border-box;

	}

	.evaluate .title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		line-height: 1;
	}

	.userinfo {
		display: flex;
		border-bottom: #eee 2rpx solid;
		margin-bottom: 50rpx;
		padding-bottom: 30rpx;
	}

	.userinfo image {
		width: 120rpx;
		height: 120rpx;
	}

	.userinfo .right {
		padding: 0 20rpx;
	}

	.userinfo .hang1 {
		display: flex;
		justify-content: space-between;
	}

	.userinfo .hang1 view:nth-child(1) {
		font-size: 35rpx;
		font-weight: 600;
	}

	.userinfo .hang1 view:nth-child(2) {
		font-size: 30rpx;
		font-weight: 400;
	}

	.bottom {
		display: flex;
	}

	.buyCar,
	.confirm {
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;

		/* 新增置顶（固定定位）样式 */
		position: fixed;
		/* 固定定位 */
		bottom: 0;
		/* 固定在底部 */
		width: 40%;
		/* 两个按钮各占一半宽度，可根据需求调整 */
		left: 0;
		/* 第一个按钮靠左 */
	}

	.buyCar {
		background-color: #2b85e4;
		left: 5%;
	}

	.confirm {
		background-color: coral;
		left: 55%;
	}

	/* 服务订单模态框 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		align-items: flex-end;
	}

	.modal-content {
		width: 100%;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-close {
		font-size: 50rpx;
		color: #333;
		line-height: 1;
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-body {
		flex: 1;
		overflow-y: auto;
		padding: 30rpx;
	}

	.order-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.order-item:last-child {
		border-bottom: none;
	}

	.order-radio-wrapper {
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.order-radio {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #d9d9d9;
		background-color: #fff;
		position: relative;
		box-sizing: border-box;
	}

	.order-radio-selected {
		border-color: #2b85e4;
		background-color: #2b85e4;
	}

	.order-radio-selected::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background-color: #fff;
	}

	.order-item-name {
		flex: 1;
		font-size: 32rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.order-item-price {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		flex-shrink: 0;
	}

	.modal-footer {
		display: flex;
		padding: 30rpx;
		gap: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.total-btn {
		flex: 1;
		height: 88rpx;
		background-color: #ff8c00;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.confirm-btn {
		flex: 1;
		height: 88rpx;
		background-color: #ff8c00;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}
</style>